<!DOCTYPE html>
<html lang="en" xmlns:layout="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"
	layout:decorate="~{user/layout}">

<head>
	<title>List - sport activity </title>
</head>

<body>
	<div layout:fragment="fragment_body">
		<section class="pt-sm-7">
	<div class="container pt-3 pt-xl-5">
		<div class="row">
			
			

			<!-- Main content -->
			<div class="col-lg-12 col-xl-12 ps-lg-12 ps-xl-12">
				<!-- Title and offcanvas button -->
				<div class="d-flex justify-content-between align-items-center mb-5 mb-sm-6">
					<!-- Title -->
					<h1 class="h3 mb-0">My orders</h1>
				</div>

				<!-- Search and buttons -->
				<!--<div class="row g-3 align-items-center mb-5">
					<div class="col-xl-5">
						<form class="rounded position-relative">
							<input class="form-control pe-5" type="search" placeholder="Search" aria-label="Search">
							<button class="btn border-0 px-3 py-0 position-absolute top-50 end-0 translate-middle-y" type="submit"><i class="fas fa-search fs-6"></i></button>
						</form>
					</div>

					<div class="col-sm-6 col-xl-3 ms-auto">
						<form>
							<select class="form-select js-choice" aria-label=".form-select-sm">
								<option>Sort by</option>
								<option selected="">Published</option>
								<option>Free</option>
								<option>Newest</option>
								<option>Oldest</option>
							</select>
						</form>
					</div>

					<div class="col-sm-6 col-xl-3">
						<a href="#" class="btn btn-primary mb-0"><i class="bi bi-plus-lg me-2"></i>Add new project</a>
					</div>
				</div>-->

				<!-- Table -->
				<div class="table-responsive border-0">
					<table class="table align-middle p-4 mb-0 table-hover" id="recordTable"></table>
				</div>

			</div>
		</div>
	</div>
</section>
	</div>
	<script layout:fragment="fragment_script">
		$(document).ready(function () {
			loadRecordTable()
		})
		function loadRecordTable() {
			$('#recordTable').bootstrapTable('destroy');
			$('#recordTable').bootstrapTable({
				url: "[[@{'/user/records'}]]",
				uniqueId: 'recordId',
				dataType: "json",
				pagination: true,
				pageSize: 10,
				queryParams: function (params) {
					var temp = {
						size: params.limit,
						page: (params.offset / params.limit),
						sort: params.sort,
						sortOrder: params.order
					};
					return temp;
				},
				sidePagination: "server",
				pageList: [30, 50],
				columns: [{
					title: 'Sort',
					formatter: function (value, row, index) {
						var pageSize = $('#recordTable').bootstrapTable('getOptions').pageSize;
						var pageNumber = $('#recordTable').bootstrapTable('getOptions').pageNumber;
						return pageSize * (pageNumber - 1) + index + 1;
					}
				}, {
					field: 'recordSportId',
					title: 'The-Sport',
					formatter: function (value, row, index) {
						return row.sport.sportTitle
					}
				}, {
					field: 'recordSlotId',
					title: 'The-Slot',
					formatter: function (value, row, index) {
						return row.recordDate + ' ' + row.slot.fullTime
					}
				}, {
					field: 'recordPrice',
					title: 'Unit-Price',
					formatter: function (value, row, index) {
						return value
					}
				}, {
					field: 'recordPay',
					title: 'Payment-Status',
					formatter: function (value, row, index) {
						var pstr = 'Paid </br>' + row.recordPayTime
						return ['Not', pstr][value]
					}
				}, {
					field: 'recordConfirm',
					title: 'Confirm-Status',
					formatter: function (value, row, index) {
						var pstr = 'Confirm </br>' + row.recordConfirmTime
						return ['Not', pstr][value]
					}
				}, {
					field: 'recordTime',
					title: 'Created',
					formatter: function (value, row, index) {
						return value
					}
				},{
					title: 'Operate',
					field: 'recordId',
					class: 'text-center',
					width: '20%',
					formatter: function (value, row, index) {
						let res = '';
						if(row.recordPay == 0){
							res += '<button class="btn btn-sm btn-primary" onclick="Pay(\'' + value + '\', 1)">Pay</button>&nbsp;';
						}else{
							if(row.recordConfirm == 0){
								res += '<button class="btn btn-sm btn-danger" onclick="Pay(\'' + value + '\', 0)">Cancel</button>&nbsp;';
							}
						}
						return res;
					}
				},],
				onPostBody: function (value) {
					$(".fixed-table-container").css('padding-bottom', '37px');
				}
			});
		}
		function Pay(recordId, type) {
			layer.msg("Do you want to " + (type==1?'Pay':'Cancel') + " it", {
				title: 'tip', icon: 3, btn: ["Confirm", "Cancel"],
				yes: function () {
					$.ajax({
						type: "post",
						url: ctx + "/user/payRecord",
						data: {
							"recordId": recordId,
							"payStatus": type,
						},
						success: function (resp) {
							layer.msg(resp.msg);
							if (resp.status == 0) {
								loadRecordTable()
							}
						}
					});
				},
				btn2: function () {
					// layer.msg("Cancel");
				}
			});
		}
	</script>
</body>
</html>